<template>
  <div class="team-detail">
    <head-top head-title="个人详情" go-back="true"></head-top>
    <div class="detail-wrapper">
      <mt-cell :title="detail.name">
        <span>
          <img src="./images/zaixian@2x.png" alt="" width="36" height="36" v-show="detail.status===1">
          <img src="./images/yilikai@2x.png" alt="" width="36" height="36" v-show="detail.status===0">
        </span>
        <img v-show="detail.head_img" class="touxiang" slot="icon" :src="detail.head_img" width="40" height="40">
            <span v-show="!detail.head_img" class="head-bg" slot="icon">{{detail.bgName}}</span>
      </mt-cell>
      <mt-cell title="担任职位" :value="detail.occupation"></mt-cell>
      <!-- <mt-cell title="姓名" value="张鑫"></mt-cell>     -->
      <mt-cell title="电话号码" :value="detail.phone"></mt-cell>
      <!-- <mt-cell title="个人邮箱" value="9165588@qq.com"></mt-cell> -->
      <mt-cell title="所属部门" :value="detail.department"></mt-cell>
      <mt-cell title="上班时间" :value="detail.first_time || '未设置上班时间'"></mt-cell>
      <mt-cell title="下班时间" :value="detail.fourth_time || '未设置下班时间'"></mt-cell>
    </div>
    <div class="split"></div>
    <div class="timer">
      <mt-cell
        title="打卡详情"
        :to="'/CardCount/' + $route.params.id"
        is-link
        value="打卡统计">
      </mt-cell>      
    </div>
    <div class="clock-total">
      <span class="count">共打卡{{count || 0}}次</span>
      <span class="time">{{Date.now() | dateFmt('YYYY-MM-DD')}}</span>
    </div>
    <div v-show="!count" class="no-card">
      <mt-cell title="无打卡记录"></mt-cell>          
    </div>
    <day-count :dayDaka="dayDaka" :timeShow="false" :count="count"></day-count>
  </div>
</template>

<script>
import headTop from '../../components/header/Header.vue'
import dayCount from '../common/dayCount.vue'
import {getEmployeeDetail} from '../../api/jianli.js'

export default {
  name: 'TeamDetail',
  data() {
    return {
      detail: {},
      dayDaka: {},
      count: ''
    }
  },
  components: {
    headTop,
    dayCount
  },
  created() {
    this._getEmployeeDetail()
  },
  methods: {
    _getEmployeeDetail() {
      getEmployeeDetail(this.$route.params.id).then(res => {
        this.detail = res.data
        this.dayDaka = res.data.check
        this.count = res.data.number
        this.$set(this.detail, 'bgName', this.detail.name.substring(this.detail.name.length - 2))
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>

<style lang="scss">
@import '../../common/sass/mixin.scss';
  .team-detail {
    padding-top: 40px;
    background-color: #fff;
    .mint-cell {
      background-image: linear-gradient(180deg, #d9d9d9, #d9d9d9 50%, transparent 50%);
      background-size: 100% 1px;
      background-repeat: no-repeat;
      background-position: bottom;
      &:last-child {
        background-size: 100% 0px;
      }
    }
    .mint-cell-wrapper {
      background-size: 0px 0px;
      // padding: 0;
    }
    .clock-total{
      height: 30px;
      padding: 0 10px;
      line-height: 30px;
      background-color: #f2f2f2;
      .time {
        float: right;
      }
    }
    .no-card{
      height: 100px;
    }
    .head-bg {
      display: inline-block;
      text-align: center;
      line-height: 40px;
      width: 40px;
      height: 40px;
      background-color: #0078de;
      border-radius: 50%;
      color: #fff;
      font-size: 12px;
    }
    .mint-cell-allow-right::after {
      right: 10px;
      width: 10px;
      height: 10px;
      }
    .detail-wrapper{
      margin: 0 10px;
      .touxiang{
        border-radius: 50%;
      }
      .mint-cell-wrapper{
        padding: 0;
      }
    }
    .timer{
      .mint-cell-value.is-link{
        color: #0078de;
        margin-right: 12px;
        font-size: 12px;        
      }
    }
    .split{
      width: 100%;
      height: 10px;
      background-color: #f2f2f2;
    }
  }
</style>
